<template>
  <div class="w-full flex items-center">
    <el-tag type="primary" class="mr-2">检查项</el-tag>
    <el-checkbox-group
      v-model="regionId"
      @change="handleReport"
      class="mr-5 flex flex-wrap items-center"
    >
      <div
        class="itemELCheckbox"
        v-for="item in checkDetailForm.regionData"
        :key="item.regionId"
      >
        <el-checkbox
          label=""
          :value="item.regionId"
          :disabled="regionId.includes(9) || regionId.includes(10)"
        />
        <div
          class="itemELCheckbox-title"
          :class="{
            active: regionId.includes(item.regionId),
          }"
          title="点击跳转"
          @click="scrollTo(item.regionId)"
        >
          {{ item.regionName }}
        </div>
      </div>
    </el-checkbox-group>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount, watchEffect } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { useUserStore } from "@/pinia";
import { storeToRefs } from "pinia";
import { watchStorage, setStorageWithEvent } from "@/utils/GlobalMonitoring.js";

onMounted(() => {
  regionId.value = [1, 2, 3, 4, 5, 6, 7, 8];
});

const userStore = useUserStore();
const { checkDetailForm } = storeToRefs(userStore);

const regionId = ref([(1, 2, 3, 4, 5, 6, 7, 8)]);
const handleReport = () => {
  if (
    regionId.value &&
    (regionId.value.includes(9) || regionId.value.includes(10))
  ) {
    regionId.value = regionId.value.filter((item) => item === 9 || item === 10);
  }
  userStore.updateCheckItem(regionId.value);
  setStorageWithEvent("refresh_data");
};

// 锚点跳转
const scrollTo = (elementId) => {
  setStorageWithEvent("anchor_jump", { elementId: elementId });
};

// let cleanup;
// onMounted(() => {
//   cleanup = watchStorage("refresh_region_item", (e) => {
//     console.log(666);

//     regionId.value = checkDetailForm.value.projectList
//       .map((item) => {
//         if (item.isChecked) {
//           return item.regionId;
//         }
//       })
//       .filter(Boolean);
//   });
//   return () => cleanup();
// });

// onBeforeUnmount(() => {
//   cleanup();
// });

// watchEffect(() => {
//   if (checkDetailForm.value.id) {
//     regionId.value = checkDetailForm.value.projectList
//       .map((item) => {
//         if (item.isChecked) {
//           return item.regionId;
//         }
//       })
//       .filter(Boolean);
//   }
// });
</script>

<style scoped lang="scss">
.itemELCheckbox {
  @apply flex items-center mr-1;
}
.itemELCheckbox-title {
  @apply cursor-pointer mr-2 text-[0.65rem];
  color: #ccc;
}
.itemELCheckbox-title.active {
  color: #409eff;
}

:deep(.el-checkbox-group) {
  font-size: 0.8rem;
}
</style>